<!--
* TODO(auto-full 自动补全组件)
* 1.事件列表
* @auther zhangQ
* @date 2017/8/2 22:12
 -->
<style scoped>
  .auto-full {
    padding: 0;
  }

  /* 弹出层样式 */
  *, th, td {
    font-size: 13px;
  }

  .drop-down {
    position: relative;
  }

  .drop-down-area {
    position: absolute;
    width: 100%;
    min-width: 150px;
    z-index: 1000;
  }

  /*
    .auto-mark {
      position: fixed;
      filter: alpha(opacity=100);
      background: #FFF;
      position: fixed;
      right: 0;
      bottom: 0;
      top: 0;
      left: 0;
      z-index: 800;
    }*/

  .auto-body {
    position: relative;
    width: 100%;
  }

  .auto-active:hover {
    position: absolute;
    z-index: 1000;
    width: 100%;
    background-color: #00FF00;
    cursor: pointer;
  }

  /* tbody */
  .drop-down tbody tr:hover {
    background-color: #2d8cf0;
    color: #FFF;
  }

  /* 隐藏上下箭头 */
  scrollbarbutton {
    display: none !important;
  }
</style>

<template>
  <div class="col-md-12 auto-full" @mouseover="autoMouseover" @mouseout="autoMouseout" @blur="autoBlur" tabindex="-1"
       @focus="autoFocus" @click="autoClick">
    <!--<div class="auto-mark" @click="dropDownShowClose" v-if="dropDownShow">qwqw</div>-->
    <div class="auto-active">
      <!-- 如果input获得焦点，input -->
      <input type="text" class="form-control" @keyup="inputKeyup($event)" v-model="result.txt" @focus="txtFocus"
             @input="txtInput" @blur="txtBlur" @click="txtClick">
      <!--
        下拉框弹出：1.先点击input 组件是不会获得焦点的，input获得焦点，弹出下拉框
                    2.result.txt有值 则过滤，没值显示所有
                    3.组件是否获得焦点autoIsFocus，如果组件获得焦点，下拉弹出,组件失去焦点下拉关闭
      -->
      <div class="drop-down" v-if="dropDownShow">
        <div class="drop-down-area">
          <div class="panel panel-default">
            <!-- 带面板的下拉框 -->
            <div class="panel-body">
              <p>选择西药</p>
            </div>
            <div style="height: 400px;overflow-y: auto;padding: 0 10px;">
              <table class="table table-striped table-hover table-condensed">
                <thead style="background-color: #eef1f6;">
                <tr>
                  <th>药品名称</th>
                  <th>jixin</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(index,item) in loodData" @click="autoSelected(item,index)">
                  <td>{{ item.commodityName }}</td>
                  <td>{{ index }}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {searchSourceDate} from './searchData'
  export default {
    components: {},
    data: function () {
      return {
        dropDownShow: false,
        markShow: true,
        result: {
          txt: ''
        },
        autoIsFocus: false, // 组件是否获得焦点
        loodData: []
      }
    },
    props: {
      // 数据源
      source: {
        type: Array,
        default () {
          return []
        }
      },
      searchFields: {
        type: String,
        default () {
          return ''
        }
      },
      // 需要显示的字段属性
      txtFields: {
        type: String,
        default () {
          return ''
        }
      },
      // 得到的值得属性
      valFields: {}
    },
    watch: {
      'result.txt': function (val, oldVal) {
        if (val) {
          this.dropDownShowOpen()
        } else {
          this.dropDownShowClose()
        }
      }
    },
    methods: {
      /**
       * TODO(输入框键盘事件绑定)
       * @auther zhangQ
       * @date 2017/8/2 23:19
       **/
      inputKeyup (ev) {
        if (ev.keyCode === 8) {
        }
        if (ev.keyCode >= 48 && ev.keyCode <= 57) {
        }
        console.log(ev.keyCode)
      },
      /**
       * TODO(下拉框收起)
       * @auther zhangQ
       * @date 2017/8/3 22:04
       **/
      dropDownShowClose () {
        this.dropDownShow = false
        this.$emit('dropDownShowClose')
      },
      /**
       * TODO(下拉框弹出)
       * @auther zhangQ
       * @date 2017/8/3 22:04
       **/
      dropDownShowOpen () {
        this.dropDownShow = true
        this.$emit('dropDownShowOpen')
      },
      /**
       * TODO(鼠标移入)
       * @auther zhangQ
       * @date 2017/8/5 11:00
       **/
      autoMouseover () {
        this.$emit('autoMouseover')
      },
      /**
       * TODO(鼠标移出)
       * @auther zhangQ
       * @date 2017/8/5 11:00
       **/
      autoMouseout () {
        this.$emit('autoMouseover')
      },
      /**
       * TODO(失去焦点)
       * @auther zhangQ
       * @date 2017/8/5 22:13
       **/
      autoBlur () {
        this.autoIsFocus = false
        this.$emit('autoBlur')
        this.dropDownShowClose()
      },
      /**
       * TODO(得到焦点)
       * @auther zhangQ
       * @date 2017/8/5 22:13
       **/
      autoFocus () {
        this.autoIsFocus = true
        this.$emit('autoFocus')
        this.dropDownShowOpen()
      },
      /**
       * TODO(单机组件)
       * @auther zhangQ
       * @date 2017/8/5 22:31
       **/
      autoClick () {
        this.$emit('autoClick')
      },
      /**
       * TODO(input获得焦点)
       * @auther zhangQ
       * @date 2017/8/6 0:57
       **/
      txtFocus () {
        this.$emit('txtFocus')
        this.dropDownShowOpen()
      },
      /**
       * TODO(input失去焦点)
       * @auther zhangQ
       * @date 2017/8/6 0:58
       **/
      txtBlur () {
        // 如果组件获得焦点，什么都不做，反之，关闭下拉框,组件失去焦点事件
        if (!this.autoIsFocus) {
          this.autoBlur()
          this.dropDownShowClose()
        }
        this.$emit('txtBlur')
      },
      /**
       * TODO(input单机)
       * @auther zhangQ
       * @date 2017/8/6 0:58
       **/
      txtClick () {
        this.$emit('txtClick')
      },
      /**
       * TODO(input的input事件)
       * @auther zhangQ
       * @date 2017/8/8 13:11
       **/
      txtInput () {
        console.log(this.result.txt)
        // 多久去爬一次数据
        this.loadDropDownData()
      },
      /**
       * TODO(加载下拉数据)
       * @auther zhangQ
       * @date 2017/8/6 23:29
       **/
      loadDropDownData () {
        // 如果是中文，在这里变成pinyin首字母输入
        let resloodData = searchSourceDate(this.source, this.result.txt, this.searchFields)
        this.loodData = resloodData
      },
      /**
       * TODO(选择数据)
       * @param sourceItem:::数据源项目
       * @auther zhangQ
       * @date 2017/8/8 12:54
       **/
      autoSelected (sourceItem) {
        // 在这里处理值
        this.result.txt = sourceItem[this.txtFields]
        this.loadDropDownData()
        this.$emit('autoSelected', sourceItem)
        let vue = this
        setTimeout(() => {
          vue.dropDownShowClose()
        }, 100)
      }
    },
    events: {},
    created () {
    },
    ready () {
    }
  }
</script>

